<script setup lang="ts">
import { computed, onMounted, reactive, ref, useAttrs, watch } from 'vue';
import { UPDATE_MODEL_EVENT } from '@jctech/constants/event';
import { textboxEmits, textboxProps } from './textboxSrc';

const props = defineProps(textboxProps);

const emits = defineEmits(textboxEmits);

defineOptions({
  name: 'CTextbox'
});

const inputRef = ref(null);

const attrs = useAttrs();
const handleUpdate = (value) => {
  let _value = value;
  if (props.type === 'number') {
    _value = value === 0 || value === '0' ? null : value;
  }
  emits(UPDATE_MODEL_EVENT, _value);
};
</script>

<template>
  <el-form-item :label="props.label" :prop="props.prop" class="jctech-control-wrapper jc-textbox-wrapper">
    <el-input
      ref="inputRef"
      v-bind="{ ...attrs, ...props }"
      :model-value="props.modelValue"
      :disabled="!props.isEnabled"
      :readonly="props.isReadOnly"
      @update:modelValue="handleUpdate"
    >
      <template v-if="props.unit || attrs.suffix" #suffix>
        {{ props.unit || attrs.suffix }}
      </template>
      <template v-if="attrs.prefix" #prefix>
        {{ attrs.prefix }}
      </template>
    </el-input>
  </el-form-item>
</template>

<style lang="less">
.jctech-control-wrapper .el-form-item__label {
  padding-left: 12px;
}
</style>
